<template>
	<view class="body">
		<!-- 新增月初计划任务 -->
		<myHeader :title="title"></myHeader>

		<!-- 新增 -->
		<view class="mt-20 p-20">
			<uni-forms :value="formData" ref="form" :rules="rules">
				<uni-forms-item label="任务名称" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入任务名" />
				</uni-forms-item>
				<uni-forms-item label="任务分值" name="score">
					<uni-easyinput type="number" v-model="formData.score" placeholder="请输入分数" />
				</uni-forms-item>
				<uni-forms-item label="开始时间" name="startTime">
					<uni-datetime-picker v-model="formData.startTime"></uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item label="结束时间" name="endTime">
					<uni-datetime-picker v-model="formData.endTime"></uni-datetime-picker>
				</uni-forms-item>

				<!-- 图片上传 -->
				<uni-file-picker :auto-upload="true" mode="list" file-mediatype="all" @select="select">
				</uni-file-picker>
				<progress v-if="progressVal != 0" activeColor="#4CAF50" :percent="progressVal"
					stroke-width="10"></progress>

				<view class="mt-20 ">
					<button class="bg-red text-white" @click="submitForm">提交</button>
				</view>

			</uni-forms>

		</view>
	</view>
</template>

<script>
	import myHeader from '../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: '新增悬赏任务',
				// 表单数据
				formData: {
					name: '',
					startTime: '',
					score:'',
					endTime: ''
				},
				// 文件上传后的url
				fileUrl: [],
				progressVal: 0,
				// 表单验证
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					score: {
						rules: [{
							required: true,
							errorMessage: '请输入分值',
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请输入开始时间',
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请输入截止时间',
						}]
					}
				}
			}
		},
		mounted() {},
		methods: {
			submitForm() {
				
				this.$refs.form.submit().then(res => {
					if (this.fileUrl.length <= 0) {
						uni.showToast({
							title: '请上传任务文件',
							icon: 'none'
						})
						return ;
					}
					if (this.formData.score <= 0){
						uni.showToast({
							title: '分值不能为负数',
							icon: 'none'
						})
						return ;
					}
					let param = {
						"file": this.fileUrl.toString(),
						"name": this.formData.name,
						"score": this.formData.score,
						"startTime": this.formData.startTime,
						"endTime": this.formData.endTime
					}
					NetWorkTool.POST('/api/reward-task/publish', param, true).then(res => {
						uni.showToast({
							title: res.message,
							duration: 2000
						});
						this.formData = {};
						uni.navigateTo({
							url: './index'
						})
					});
				}).catch(err => {
					uni.showToast({
						title: "请完成信息填写",
						duration: 2000,
						icon: 'none',
					});
				})
			},
			// 获取上传状态
			select(e) {
				let source = e.tempFiles[0];
				let token = '';
				uni.getStorage({
					key: 'AuthToken',
					success(e) {
						token = e
					}
				})
				const uploadTask = uni.uploadFile({
					url: '/api/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'x-access-token': token.data
					},
					formData: {
						'name': source.name,
						'size': source.size
					},
					success: (res) => {
						this.fileUrl.push(JSON.parse(res.data).data.id);
						uni.showToast({
							title: "上传成功",
							duration: 2000
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progressVal = res.progress;
				});
			},

		},
		components: {
			myHeader
		},
	}
</script>

<style lang="scss" scoped>
	@import url("/static/party_building/assets/style/federation.css");

	.group {
		border: 1px solid #E5E5E5;
		border-radius: 20upx;
	}
</style>
